<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽</title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}

			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 300px;
				top: 300px;
			}
		</style>
		<script type="text/javascript">
			// 拖拽方法封装成一个函数
			function draw(obj){
				obj.onmousedown = function(event) {
					obj.setCapture && obj.setCapture();
					event = event || window.event;
					var boxLeft = event.clientX - obj.offsetLeft;
					var boxTop = event.clientY - obj.offsetTop;
					document.onmousemove = function(event) {
						event = event || window.event;
						obj.style.left = event.clientX - boxLeft + "px";
						obj.style.top = event.clientY - boxTop + "px";
					};
					document.onmouseup = function(event) {
						document.onmousemove = null;
						document.onmouseup = null;
						obj.releaseCapture && obj.releaseCapture();
					};
					return false;
				};
			}
			window.onload = function() {
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img = document.getElementById("img");
				draw(box1);
				draw(box2);
				draw(img);
			};
		</script>
	</head>
	<body style="width: 2000px; height: 1000px;">
		我是body的内容
		<div id="box1"></div>
		<div id="box2"></div>
		<img src="img/an.jpg" id="img" style="width: 320px;height: 320px;position: absolute;left:200px;top:400px;"/>
	</body>
</html>
